<template>
	<view>
		<view class="nav_tab">
			<view class="tab_item_a" :class="{ act: act == 0 }" @click="switchMain(0, '')">
				全部
			</view>
			<view class="tab_item_a" :class="{ act: act == 1 }" @click="switchMain(1, 'jointime')">
				新成员
			</view>
			<view class="tab_item_a" :class="{ act: act == 2 }" @click="switchMain(2, 'money')" style="display: flex;">
				金额
				<view class="updown">
					<van-icon size="8" name="arrow-up" :color="order == 'asc' ? '#333333' : '#999999'" />
					<van-icon size="8" name="arrow-down" :color="order == 'desc' ? '#333333' : '#999999'" />
				</view>
			</view>
		</view>
		<swiper @change="changeSwiper" :current="currIndex" :style="{ height: swiperHeight + 'px' }">
			<swiper-item v-for="(item, i) in tab " :key="i">
				<view :id="'wrap' + i" class="swiper-item">
					<view class="item_card" v-for="(e, index) in userList " :key="e.userId">
						<view class="top_msg">
							<image style="width: 80rpx;height: 80rpx;" :src="e.userImg" mode=""></image>
							<text>{{ e.name }}</text>
							<view class="vip_span">
								vip会员
							</view>
						</view>
						<view class="ul_all">
							<view class="li_item">
								<text class="price" style="color: #FF6200;">￥{{ e.buy }}</text>
								<text class="text">购买金额</text>
							</view>
							<view class="li_item">
								<text class="price">{{ e.nums }}</text>
								<text class="text">购买数量</text>
							</view>
							<view class="li_item">
								<text class="price">{{ $daiyueapp.formatDate(e.data * 1000).slice(0, 9) }}</text>
								<text class="text">加入日期</text>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import { getDirectList } from '@/api/api'
export default {
	data() {
		return {
			selectList: [],
			isShow: false,
			currIndex: 0,
			swiperHeight: 0, // 滑块的高度(单位px)
			act: 0,
			tab: ["全部", "新成员", "金额"],
			value: "",
			order: '',
			sort: '',
			// 模拟数据
			userList: []
		}
	},

	onLoad() {
		setTimeout(this.setSwiperHeight, 10)
		this.distrbutionList()
		uni.setNavigationBarTitle({
			title: `直推成员（${this.userList.length}）`
		})
	},

	methods: {

		distrbutionList() {
			let data = {
				page: 1,
				limit: 50,
				sort: this.sort,
				order: this.sort == 'money' ? this.order : '',
			}
			getDirectList(data).then(res => {
				if (res.code == 1) {
					this.userList = res.data
				}
			})
		},


		changeShow() {
			this.isShow = !this.isShow
		},

		comData(num) {
			if (num == 0) {
				return "今日关注"
			} else {
				return `${num}天前关注`
			}
		},




		switchMain(num, name) {
			this.currIndex = num
			this.act = num
			this.sort = name
			if (name == 'money') {
				this.order = this.order == 'asc' ? 'desc' : 'asc'
			}
			this.distrbutionList()
		},
		/* 切换 swiper 滑块 */
		changeSwiper(e) {
			this.currIndex = e.detail.current;
			this.act = this.currIndex
			setTimeout(this.setSwiperHeight, 10)
		},

		/* 动态设置 swiper 的高度 */
		setSwiperHeight() {
			const element = "#wrap" + this.currIndex;
			const query = uni.createSelectorQuery().in(this);
			query.select(element).boundingClientRect();
			query.exec(res => {
				if (res && res[0]) this.swiperHeight = res[0].height;
			});
		},
	}
}
</script>

<style lang="scss" scoped>
.updown {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-left: 5rpx;
}

.swiper-item {
	display: flex;
	flex-direction: column;
	align-items: center;


	.item_card {
		padding: 20rpx;
		margin-top: 20rpx;
		background-color: #fff;
		width: 670rpx;
		border-radius: 24rpx;

		.top_msg {
			display: flex;
			align-items: center;

			text {
				margin: 0 12rpx;
			}

			.vip_span {
				width: 90rpx;
				height: 30rpx;
				border-radius: 6rpx 6rpx 100rpx 6rpx;
				background: linear-gradient(103deg, #F69700 -8%, #EB5E00 100%);
				font-size: 18rpx;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.ul_all {
			display: flex;
			align-items: center;
			margin-top: 38rpx;

			.li_item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				width: 100%;

				.text {
					font-size: 28rpx;
					line-height: 26px;
					text-align: center;
					color: #5C5C5C;
				}
			}
		}

	}
}

.nav_tab {
	width: 660rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	// justify-content: space-evenly;
	padding: 20rpx 40rpx;
	// background-color: #fff;

	.tab_item_a {

		font-family: PingFang SC;
		font-size: 26rpx;
		font-weight: normal;
		line-height: 30rpx;
		text-align: center;
		letter-spacing: 0px;
		color: #5C5C5C;
	}

	.act {
		font-size: 28rpx;
		font-weight: bold;
		line-height: 30rpx;
		letter-spacing: 0px;
		color: #000;
	}
}

.nav_title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #fff;

	.nav_left {
		display: flex;
		align-items: center;
		margin-left: 32rpx;

		text {
			font-family: PingFang SC;
			font-size: 26rpx;
			font-weight: normal;
			line-height: 22rpx;
			letter-spacing: 0rpx;
		}
	}
}
</style>